site_8g/src/app/[locale]/(TabBar)/sports/SportsClient copy 6.tsx

"use client";
import { GameInfo } from "@/api/home";
import { useRouter } from "@/i18n/routing";
import { server } from "@/utils/client";
import { useTranslations } from "next-intl";
import Script from "next/script";
import { FC, useEffect, useRef,useState } from "react";

interface Props {
    brand_id: string;
    token: string;
}
//  dedprz | deepwin365 | damslots | chips |   deloro-casino
const SportsClient: FC<Props> = (props) => {
    const t = useTranslations("ProfilePage");
    const { brand_id, token } = props;
    const [currentToken, setCurrentToken] = useState(token);

    const btRef = useRef(null);
    const router = useRouter();

    const isFreshRef = useRef(false);

    useEffect(() => {
      console.log("onLoad=====>0000");
      // @ts-ignore
      if (window.BTRenderer) {
        console.log("onLoad=====>1111");
        onLoad();
      }
      
      // 离开体育页的时候需要kill掉
      return () => {
        console.log("onLoad=====>killkillkillkillkill",btRef.current);
        if(btRef.current){
          // @ts-ignore
          btRef.current?.kill();
          btRef.current = null;
        }
      };
    }, []);

    useEffect(() => {
      console.log("onLoad=====>22222");
      // 如果token更新了才调用update
      if( currentToken !== token){
        console.log("onLoad=====>333333");
        updateToken(token);
      }
    }, [token]);



    const getGameDetailApi = async () => {
        const data = await server
            .request<GameInfo>({
                url: "/v1/api/front/game_info_by_id",
                method: "post",
                data: { id: "sportsBet", mode: 1 },
            })
            .then((res) => {
                if (res.code === 200) {
                  setCurrentToken(res.data.game_url)
                  return res.data.game_url;
                } else {
                  return "";
                }
            });
        return data;
    };

    const updateToken = (newToken: string) => {
      console.log("onLoad=====>44444-0000000");
      // @ts-ignore
        if(currentToken!== newToken){
          console.log("onLoad=====>44444");
          setCurrentToken(newToken);
          // session失效需要重新load
          // @ts-ignore
          if (window.BTRenderer && !!isFreshRef.current) {
            console.log("onLoad=====>1111isFreshRef");
            onLoad();
          }else{
            // 多次点击当前页面只需要跳转到首页即可
            // 使用 updateOptions 更新当前的 BTRenderer 参数，而不是重新初始化
            if (btRef.current) {
              console.log("onLoad=====>55555");
              // 更新 token 和其他配置
              // @ts-ignore
              btRef.current.updateOptions({
                token: newToken, // 更新 token
                url: '/', // 更新 URL 或其他参数
                betSlipOffsetBottom: 80,
                betSlipZIndex: 1000,
                stickyTop: 0,
                betSlipOffsetTop: 50,
              });
            }
          }
          
        }
    }

    const onLoad = () => {
      // @ts-ignore
      const bt = new BTRenderer();
      btRef.current = bt;
      console.log("onLoad=====>666666",token);
      bt.initialize({
          brand_id: brand_id,
          token: token,//使用最新的token
          onTokenExpired: getGameDetailApi, //过期自动更新token
          onSessionRefresh: () => {
            console.log('onLoad=====>onSessionRefresh')
            // 销毁之前的实例并等待刷新完成
            if(btRef.current){
              console.log('onLoad=====>onSessionRefresh1111')
              // @ts-ignore
              btRef.current?.kill();
            }
            isFreshRef.current = true;
            console.log('onLoad=====>onSessionRefresh11112222')
            router.refresh()
          },
          themeName: "default",
          lang: "pt-br",
          target: document.getElementById("betby"),
          betSlipOffsetBottom: 80,
          // betSlipOffsetRight: 750,

          betSlipZIndex: 1000,
          stickyTop: 0,
          betSlipOffsetTop: 50,
          onRecharge: function () {
              router.push("/deposit");
          },
          onRouteChange: function () {
          },
          onLogin: function () {},
          onRegister: function () {},
          onBetSlipStateChange: function () {},
      });
    };

    return (
        <>    
          <div id="betby" className={"h-[100%]"}></div>

          <Script src={"https://ui.invisiblesport.com/bt-renderer.min.js"} onLoad={onLoad} />
        </>
    );
};

export default SportsClient;